import React, { Component } from 'react';
import Container from '@icedesign/container';
import { Button, Dialog, Input, Upload, Feedback } from '@icedesign/base';
import {
  FormBinderWrapper,
  FormBinder,
  FormError,
} from '@icedesign/form-binder';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Api from '../../../../Api/Api';
import Ajax from '../../../../Ajax/index';
import UserCommand from '../../../../../store/actions/Users/UserCommand';
// export default
@withRouter
class AccountPanel extends Component {
  static displayName = 'AccountPanel';
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  };
  constructor(props) {
    super(props);
    this.state = { 
      open: false,
      visible: false
    };
  }

  handleOpenEditPanel = () => {
    this.setState({ open: true });
  };

  handleCloseEditPanel = () => {
    this.setState({ open: false });
  };

  formChange = (value) => {
    this.setState({
      value: value 
    });
  };

  onClose = () => {
    this.setState({
      visible: false
    });
  };

  onOk = () => {
    var { name, avatar, desc } = this.state.value;
    var url = Api.changeInfomation({
      username: this.props.userInfo.username,
      usernickname: name,
      useravatar: avatar,
      desc: desc
    });
    Feedback.toast.show({
      type: 'loading',
      content: '正在修改'
    });
    Ajax.get(url)
      .then((res) => {
        if (res.data.code) {
          Feedback.toast.hide();
          Feedback.toast.show({
            content: res.data.message,
            afterClose: () => {
              var { desc, useravatar, username, usernickname, usertype } = res.data.data;
              this.props.dispatch(UserCommand.addUser({
                username,
                desc,
                usernickname,
                usertype,
                useravatar
              }));
              this.props.history.push('/dashboard/home');
            }
          });
        }
      })
  }

  submitEdit = () => {
    // console.log(this.state.value);
    if (this.props.userInfo.username) {
      if (this.state.value) {
        this.setState({
          visible: true
        });
      } else {
        console.log('不能为空')
      }
    } else {
      console.log('未登录')
    }
    
  }
  render() {
    // console.log(this.props.userInfo);
    const userNickName = this.props.userInfo.usernickname ? this.props.userInfo.usernickname : '请登录';
    const userType = this.props.userInfo.usertype ? this.props.userInfo.usertype : '请登录';
    const desc = this.props.userInfo.desc ? this.props.userInfo.desc : '这个家伙很懒什么都没有留下';
    const useravatar = this.props.userInfo.useravatar ? this.props.userInfo.useravatar : 'https://img.alicdn.com/tfs/TB1L6tBXQyWBuNjy0FpXXassXXa-80-80.png';
    return (
      <Container>
        <div style={styles.header}>
          <h2 style={styles.title}>账号信息</h2>
          <div>
            <Button onClick={this.handleOpenEditPanel} type="primary">
              修改
            </Button>
          </div>
        </div>
        <div style={styles.infoRow}>
          <div style={styles.infoLabel}>账号类型</div>
          <div style={styles.infoDetail}>{ userType }</div>
        </div>
        <div style={styles.infoRow}>
          <div style={styles.infoLabel}>账号名称</div>
          <div style={styles.infoDetail}>{ userNickName }</div>
        </div>
        <div style={styles.infoRow}>
          <div style={styles.infoLabel}>账号头像</div>
          <div style={styles.infoDetail}>
            {/* <img src={require('./images/avatar.jpg')} style={{ width: 120 }} /> */}
            {/* https://img.alicdn.com/tfs/TB1L6tBXQyWBuNjy0FpXXassXXa-80-80.png */}
            <img src={useravatar} style={{ width: 120 }}/>
          </div>
        </div>
        <div style={styles.infoRow}>
          <div style={styles.infoLabel}>账号简介</div>
          <div style={styles.infoDetail}>{ desc }</div>
        </div>
        <Dialog
          visible={this.state.open}
          onOk={this.submitEdit}
          onClose={this.handleCloseEditPanel}
          onCancel={this.handleCloseEditPanel}
          title="修改账户信息"
        >
          <FormBinderWrapper
            value={this.state.value}
            onChange={this.formChange}
          >
            <div>
              <div style={styles.fromItem}>
                <span>账号名称：</span>
                <FormBinder name="name" required max={10} message="不能为空">
                  <Input style={{ width: 500 }} />
                </FormBinder>
              </div>
              <FormError style={{ marginLeft: 10 }} name="name" />
              <div style={styles.fromItem}>
                <span>账号头像：</span>
                <FormBinder name="avatar" required max={100} message="不能为空">
                  <Input style={{ width: 500 }} />
                </FormBinder>
              </div>
              <FormError style={{ marginLeft: 10 }} name="avatar" />
              <div style={styles.fromItem}>
                <span>账号简介：</span>
                <FormBinder name="desc" required max={200} message="不能为空">
                  <Input
                    multiple
                    hasLimitHint
                    maxLength={200}
                    style={{ width: 500 }}
                  />
                </FormBinder>
              </div>
              <FormError style={{ marginLeft: 10 }} name="desc" />
            </div>
          </FormBinderWrapper>
        </Dialog>
        <span>
          <Dialog
            visible={this.state.visible}
            onOk={this.onOk}
            closable="esc,mask,close"
            onCancel={this.onClose}
            onClose={this.onClose}
            title="修改账号信息"
          >
            <h3>确认修改么？</h3>
          </Dialog>
        </span>
      </Container>
    );
  }
}

const styles = {
  header: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  title: {
    fontSize: 20,
    margin: 0,
    paddingBottom: 20,
  },
  infoRow: {
    padding: '16px 0',
    display: 'flex',
    borderBottom: '1px solid #f6f6f6',
  },
  infoLabel: {
    flex: '0 0 100px',
    color: '#999',
  },
  infoDetail: {},

  fromItem: {
    display: 'flex',
    alignItems: 'flex-start',
    paddingBottom: 10,
  },
};

function select(store) {
  return {
    userInfo: store.default.userStore.userInfo,
    status: store.default.userStore.status,
  }
}
export default connect(select)(AccountPanel);